<template>
	<view class="orderList">
		<view class="tabsBox">
			<view class="title">
				订单信息
			</view>
			<view class="itemBox">
				<view class="item" @click="handleChangestatus(0)">
					<view class="lable">
						全部
					</view>
					<view class="value">
						<!-- {{dataList.length}} -->
					</view>
					<view v-if="currIndex==0" class="heng"></view>
				</view>

				<!-- 	<view class="item" @click="handleChangestatus(1)">
					<view class="lable">
						已提交
					</view>
					<view class="value">
					</view>
					<view v-if="currIndex==1" class="heng"></view>
				</view> -->
				<view class="item" @click="handleChangestatus(2)">
					<view class="lable">
						待发货
					</view>
					<view class="value">
						<!-- {{undeliver}} -->
					</view>
					<view v-if="currIndex==2" class="heng"></view>
					<view class="box">
						<u-badge max="99" :value="count" bgColor="red"></u-badge>
					</view>
				</view>
				<view class="item" @click="handleChangestatus(3)">
					<view class="lable">
						待收货
					</view>
					<view class="value">
						<!-- {{unReceive}} -->
					</view>
					<view v-if="currIndex==3" class="heng"></view>
					<view class="box" style="right: -32rpx;">
						<u-badge max="99" :value="count1" bgColor="red"></u-badge>
					</view>
				</view>
				<view class="item" @click="handleChangestatus(4)">
					<view class="lable">
						待评价
					</view>
					<view class="value">
						<!-- {{unevaluate}} -->
					</view>
					<view v-if="currIndex==4" class="heng"></view>
				</view>


			</view>

		</view>

		<view class="" style="height: 30rpx;"></view>

		<view v-if="dataList.length" class="dataList">
			<view class="dataItem" v-for="(item,index) in dataList" :key="item.id">
				<view class="itemtop">
					<view class="orderNumber">
						{{item.order_no}}
					</view>
					<view v-if="item.status ==-1" class="status" style="color: #FF3D3D;">
						已取消
					</view>

					<view v-if="item.status ==0" class="status" style="color: #FF3D3D;">
						已提交
					</view>
					<view v-if="item.status ==1" class="status" style="color: #FF3D3D;">
						待发货
					</view>
					<view v-if="item.status ==2" class="status" style="color: #FF3D3D;">
						待收货
					</view>
					<view v-if="item.status ==3" class="status" style="color: #FF3D3D;">
						待评价
					</view>
					<view v-if="item.status ==4" class="status" style="color: #FF3D3D;">
						已完成
					</view>
					<view v-if="item.status ==5" class="status" style="color: #FF3D3D;">
						退款中
					</view>
					<view v-if="item.status ==7" class="status" style="color: #FF3D3D;">
						已拒绝
					</view>
					<view v-if="item.status ==8" class="status" style="color: #FF3D3D;">
						已退款
					</view>

				</view>

				<view class="productDetail" @click="handleDetail(item)">
					<view class="detailBox" v-for="(productitem,productindex) in item.orders">
						<view class="detailBoxinner">
							<image :src="productitem.products_image"
								style="width: 160rpx;height: 160rpx;border-radius: 10rpx;" mode="aspectFill">
							</image>
							<view class="message">
								<view class="name">
									{{productitem.products_name}}
								</view>
								<view class="desc">
									规格：{{productitem.sku_text}}
								</view>
								<view class="bottom">
									<view class="price">
										₱{{productitem.price}}
									</view>
									<view class="number">
										x{{productitem.num}}
									</view>
								</view>
							</view>
						</view>

						<view v-if="item.status==3 && productitem.status ==3" class="btnBox"
							style="display: flex;justify-content: end;">
							<view class="btn" @click="handleEvaluate(productitem)">
								去评价
							</view>
						</view>
					</view>
					<view class="descBox">
						<text> 共计{{item.number}}件商品</text> <text style="margin-left: 32rpx;"> 总金额<text
								style="color: #FF3D3D;">₱{{item.price}}</text></text>
					</view>
				</view>

				<view v-if="item.status==0" class="btnBox" style="display: flex;">
					<view class="btn" style="margin-left: 470rpx;" @click="handleDetail(item)">
						查看详情
					</view>
				</view>


				<view
					v-if="item.status==-1 || item.status==1 || item.status==4 || item.status==5|| item.status==7|| item.status==8"
					class="btnBox">
					<view class="btn" style="margin-left: 470rpx;" @click="handleDetail(item)">
						查看详情
					</view>
				</view>

				<view v-if="item.status==2" class="btnBox" style="display: flex;">
					<view class="btn btns" style="margin-left: 290rpx;" @click="handleDetail(item)">
						查看详情
					</view>
					<view class="btn" style="margin-left: 30rpx;" @click="handlefinishitemShow(item)">
						确认收货
					</view>
				</view>






			</view>

		</view>

		<view v-else class="">
			<u-empty mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png" text='暂无该订单'>
			</u-empty>
		</view>

		<view class="" style="height: 50rpx;"></view>

		<u-modal :show="celshow" :title="celtitle" :showCancelButton="true" @confirm="handlecancellation"
			@cancel="celshow = false" confirmColor="#439B05"></u-modal>

		<u-modal :show="payshow" :title="paytitle" :showCancelButton="true" @confirm="handlePay"
			@cancel="payshow = false" confirmColor="#439B05"></u-modal>

		<u-modal :show="delshow" :title="title" :showCancelButton="true" @confirm="handlefinishorder"
			@cancel="delshow = false" confirmColor="#439B05"></u-modal>


	</view>
</template>

<script>
	import {
		userorders,
		cancellation,
		finishorder,
		waitpay,
		orderCount
	} from "@/api/api.js"
	export default {
		data() {
			return {
				status: 0,
				page: 1,
				page_size: 10,
				currIndex: 0,
				dataList: [],
				allNum: 0, //全部订单数量
				unpayment: 0, //待付款数量
				undeliver: 0, //待发货数量
				unReceive: 0, //待收获
				unevaluate: 0, //待评价
				falg: true,
				pageId: "", //订单id
				pageOrderno: "", //订单号
				celshow: false,
				celtitle: "确定要取消该订单吗？",
				payshow: false,
				paytitle: "您确定要支付该订单吗",
				title: "您确定要收货吗？",
				delshow: false,
				count: 0,
				count1: 0,
			}
		},
		onLoad(options) {
			this.currIndex = options.index
			this.status = options.index
		},
		onShow() {
			// console.log("3333333")
			this.page = 1
			this.dataList = []
			this.handleuserorders()
			this.handleorderCount()
		},

		//上拉加载
		onReachBottom() {
			this.page++;
			this.handleuserorders();
		},
		//下拉刷新
		onPullDownRefresh() {
			setTimeout(() => {
				this.page = 1;
				this.dataList = []
				this.handleuserorders();
				uni.stopPullDownRefresh();
			}, 1000)

		},
		methods: {
			async handleorderCount() {
				let res = await orderCount()
				this.count = res.data.count
				this.count1 = res.data.count1
			},
			async handleuserorders() {
				let res = await userorders({
					status: this.status,
					page: this.page,
					page_size: this.page_size,
					type: '1'
				})
				res.data.data.forEach((item, index) => {
					this.dataList.push(item)
				})
				this.dataList.forEach((item, index) => {
					let num = 0
					let sum = 0
					item.orders.forEach((subitem, index) => {
						num = num + parseInt(subitem.num)
						sum = sum + parseInt(subitem.num) * parseInt(subitem.price)
					})
					item.number = num
					item.sunprice = sum
				})
			},
			async handleuserorderslist() {
				// console.log("22")
				console.log("status", this.status)
				let res = await userorders({
					status: this.status,
					page: this.page,
					page_size: 10,
					type: '1'
				})

				this.dataList = res.data.data
			},
			handleChangestatus(index) {
				this.currIndex = index
				this.status = index
				this.page = 1
				this.dataList = []
				this.handleuserorderslist()
			},
			handleDetail(item) {
				if (item.status == 5 || item.status == 6 || item.status == 7) {
					uni.navigateTo({
						url: `./aftersaleDetail?id=${item.id}`
					})
				} else {
					uni.navigateTo({
						url: `./orderDetail?id=${item.id}`
					})
				}

			},
			handlecelshow(item) {
				this.celshow = true
				this.pageId = item.id
			},
			//取消订单
			async handlecancellation() {
				let res = await cancellation({
					id: this.pageId
				})
				if (res.code == 1000) {
					this.celshow = false
					uni.showToast({
						title: res.message,
						icon: "none",
						duration: 2000
					});
					this.page = 1
					this.dataList = []
					this.handleuserorders()
					this.handleorderCount()
				} else {
					uni.showToast({
						title: res.message,
						icon: "none",
						duration: 2000
					});
				}
			},

			handlepayshow(item) {
				this.payshow = true
				this.pageId = item.id
				this.pageOrderno = item.order_no
			},
			//立即支付
			async handlePay() {
				let subres = await waitpay({
					pay_type: '2',
					order_no: this.pageOrderno
				})
				//确认支付
				if (subres.code == 1000) {
					this.payshow = false
					uni.showToast({
						title: subres.message,
						icon: "none",
						duration: 2000
					});
					setTimeout(() => {
						this.page = 1
						this.dataList = []
						this.handleuserorders()
						this.handleorderCount()
					}, 2000)

				} else {
					uni.showToast({
						title: res.message,
						icon: "none",
						duration: 2000
					});
				}
			},
			handlefinishitemShow(item) {
				this.delshow = true
				this.pageId = item.id
			},
			async handlefinishorder() {
				let res = await finishorder({
					id: this.pageId
				})
				if (res.code == 1000) {
					this.delshow = false
					uni.showToast({
						title: res.message,
						icon: "none",
						duration: 2000
					});
					setTimeout(() => {
						this.page = 1
						this.dataList = []
						this.handleuserorders()
						this.handleorderCount()

					}, 2000)
				} else {
					uni.showToast({
						title: res.message,
						icon: "none",
						duration: 2000
					});
				}
			},
			handleAgingou(item) {
				// console.log("3333",item)
				uni.navigateTo({
					url: `/pages/home/detail?id=${item.products_id}`
				})
			},
			handleEvaluate(item) {
				uni.navigateTo({
					url: `./evaluate?data=${JSON.stringify(item)}`
				})
				event.stopPropagation()
			},
		}
	}
</script>

<style scoped lang="scss">
	.orderList {
		.tabsBox {
			width: 100%;
			height: 212rpx;
			background-color: #ffffff;
			padding: 30rpx;
			box-sizing: border-box;
			background: #439B05;

			.title {
				font-size: 32rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
				line-height: 38rpx;
			}

			.itemBox {
				width: 690rpx;
				height: 148rpx;
				background: #FFFFFF;
				border-radius: 20rpx 20rpx 20rpx 20rpx;
				margin-top: 30rpx;
				padding: 30rpx;
				box-sizing: border-box;
				display: flex;
				justify-content: space-between;

				.item {
					display: flex;
					flex-direction: column;
					align-items: center;
					position: relative;

					.box {
						position: absolute;
						right: -32rpx;
						top: -20rpx;
					}

					.lable {
						font-size: 28rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						color: #333333;
						line-height: 33rpx;

					}

					.value {
						line-height: 50rpx;
					}

					.heng {
						width: 32rpx;
						height: 6rpx;
						background: #FF3D3D;
						border-radius: 10rpx;
						margin-top: 30rpx;
					}
				}
			}

		}

		.dataList {
			margin-top: 30rpx;
			padding: 0 30rpx;
			box-sizing: border-box;

			.dataItem {
				width: 100%;
				// height: 484rpx;
				background: #FFFFFF;
				border-radius: 20rpx 20rpx 20rpx 20rpx;
				padding: 0 30rpx;
				padding-bottom: 20rpx;
				box-sizing: border-box;
				margin-bottom: 20rpx;

				.itemtop {
					width: 100%;
					height: 100rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					font-size: 28rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					color: #333333;
					line-height: 33rpx;
					border-bottom: 2rpx solid #F5F5F5;
				}

				.productDetail {
					width: 100%;
					// height: 280rpx;
					padding: 30rpx 0;
					box-sizing: border-box;
					border-bottom: 2rpx solid #F5F5F5;

					.detailBox {
						margin-bottom: 20rpx;

						.detailBoxinner {
							display: flex;
						}

						.message {
							margin-left: 20rpx;

							.name {
								width: 450rpx;
								font-size: 32rpx;
								font-family: PingFang SC, PingFang SC;
								font-weight: 500;
								color: #333333;
								line-height: 38rpx;
								white-space: nowrap;
								/* 设置不换行 */
								overflow: hidden;
								/* 设置超出部分隐藏 */
								text-overflow: ellipsis;
								/* 设置溢出的文本显示省略号 */
							}

							.desc {
								font-size: 24rpx;
								font-family: PingFang SC, PingFang SC;
								font-weight: 400;
								color: #999999;
								line-height: 28rpx;
								margin-top: 20rpx;
							}

							.bottom {
								display: flex;
								width: 100%;
								justify-content: space-between;
								margin-top: 34rpx;

								.price {
									font-size: 32rpx;
									font-family: PingFang SC, PingFang SC;
									font-weight: 400;
									color: #333333;
									line-height: 38rpx;
								}

								.number {
									font-size: 28rpx;
									font-family: PingFang SC, PingFang SC;
									font-weight: 400;
									color: #999999;
									line-height: 33rpx;
								}
							}
						}
					}
				}

				.descBox {
					margin-top: 22rpx;
					text-align: right;
					font-size: 28rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					color: #333333;
					line-height: 33rpx;
				}

				.btnBox {
					margin-top: 20rpx;

					.btn {
						width: 160rpx;
						height: 64rpx;
						background: #439B05;
						border-radius: 100rpx;
						font-size: 28rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						color: #FFFFFF;
						line-height: 64rpx;
						text-align: center;
					}

					.btns {
						border: 2rpx solid #CCCCCC;
						background: #FFFFFF;
						color: #333333;
					}
				}
			}
		}

	}
</style>